import advListView from '$v/advList'
import {//引入ajax请求的函数
    addAdvRequest,
    advListRequest,
    deleteAdvList,
    getUpdateDataRequest
}from '../api/adv'

// import {
//     isLoginRequest
//   } from '../api/admin'

//封装一个获取所有广告列表的函数
const getAllAdvList =async (res)=>{
    try{
        //一旦return 则当前函数返回一个promise实例 值为当前await的返回值
        return await advListRequest()
    }catch(e){
        alert('查询出现异常'+e.message )
    }
}

export default async (req, res) => {
    //调用获取adv列表的函数
  const advList = await getAllAdvList()//getAllAdvList函数调用的值为函数的返回值，因为返回值是await advListRequest()，所以advList = await async await advListRequest() ，而advListRequest()是request.get('/advList')，request.get('/advList')的值为promise实例,值为后端传的值，（拦截器中做了处理），所以advList =await async await request.get('/advList')，如果request.get('/advList')返回成功的promise，则async的返回值为成功的promise实例，值为后端传的值，所以前面再加一个await，那么这个await的值就是后端传的值,拿到这个值后放到渲染的界面里
    // console.log(advList)
    res.render(advListView({advList}))



   
document.onclick = async function(e){
     //添加广告逻辑
    if(e.target.id ==='adv-save'){//保存按钮
        //收集表单数据，使用FormData（js自带的，不需要下载）
        const myForm = new FormData(document.advForm)//通过name属性获取到这个表单,将表单传进去，就可以拿到表单提交的数据，这个数据打印出来是一个空对象，传到后端后，后端需要调用parse方法才能把数据解析出来

        //myForm是通过FormData构造函数new出来的对象，myForm这个对象上有一个方法get，传入input标签的name属性的值，可以获得这个标签中用户输入的信息

        //要限制表单的输入内容不能为空
        if(!myForm.get("advTitle")||!myForm.get("advType")||!myForm.get("advOrder")||!myForm.get("advPic")){
            return alert('输入内容不能为空')
        }
        //调用ajax请求的函数，并把表单数据作为参数传进去，和post请求一起发送请求给服务器
        try{
            await addAdvRequest (myForm)
            alert('添加广告成功')
            //添加广告成功后，需要触发关闭添加广告的页面
            document.querySelector('#addClose').click()
            //清空表单
            document.advForm.reset();
            //把预览也清掉
            const oPreImg = document.getElementById('preImg');
            oPreImg.style.display = 'none'
            //添加成功后，重新渲染页面
            const advList = await getAllAdvList()
            res.render(advListView({advList}))
        }catch(e){
            alert('添加广告异常'+e.message)
             //判断是否是权限异常(***还不会还不会，复制过来的)
        //     if (!e.isLogin) {
        //     //关闭添加广告的弹窗再跳转
        //     document.getElementById("addClose").click();
        //     return router.go("/login");
        //   }
        }
    }

    //删除广告逻辑
    if(e.target.nodeName === "BUTTON" && e.target.classList.contains("btn-delete")){//dom对象的类名中是否包含某个类名的方法
        const _id = e.target.dataset.id//如果在ejs中设置的自定义属性是大写，这里获取时也要用小写获取
        try{
            await deleteAdvList(_id)//删除按钮上自定义属性deleteAdv的值
            alert('删除广告成功')
            //成功之后需要再次渲染页面
            const advList = await getAllAdvList()
            res.render(advListView({advList}))
        }catch(e){
            alert('删除广告失败'+e.message)
        }
    }
    //点击外层更新的逻辑
    if(e.target.nodeName === "BUTTON" && e.target.classList.contains("btn-update")){
        const _id =e.target.dataset.id;
        try{
         const updateResult = await getUpdateDataRequest(_id)
         //拿到查到的值之后，把数据放到对应的input框中
         document.updateForm.advTitle.value = updateResult.advTitle
         document.updateForm.advType.value = updateResult.advType
         document.updateForm.advOrder.value = updateResult.advOrder
         
        }catch(e){
            alert('查询更新数据失败'+e.message)
        }
    }




 } 
 //图片预览逻辑
document.onchange =function(e){
    if(e.target.id==='advPic'){
        //FileReader是js提供的异步读取文件的类,和input的file配合使用,实例化以后得到一个对象,提供了很多方法可以读取文件
        const reader = new FileReader()
        //文件上传的事件中，当上传完成，在当前的input对象上有一个files属性,包含了上传所有文件信息组成的数组
         //reader上有一个readAsDataURL方法 可以把文件读成base64的格式
         reader.readAsDataURL(e.target.files[0])//选择上传的第一个文件
         reader.onload =function(e){ //当某个reader读完以后,会触发onload事件
            //e.target.result就是最后读取到的数据
            //获取img的id值
            const preImg =document.querySelector('#preImg')
            //把读取到的数据给img
            preImg.src = e.target.result//这个result是 image/png;base64,base64数据
            //并把图片的隐藏状态改为block状态
            preImg.style.display = 'block'
         }
    }
}
   
}
/*  base64数据是不能直接使用在src上的
例子:
数据  ，这样拼接才能达到base64在src上使用的效果，下面讲解参数使用方法

1:   data:数据名称

2: image/gif  图片类型
image/png  图片类型
image/jpeg 图片类型
image/x-icon 图标类型

3: base64 这个是数据格式格式

文字参数介绍
方法一：
<img :src=`数据名称:图片类型;数据格式,一般为后台返回的base64数据`>
方法二：
<img :src="'数据名称:图片类型;数据格式,'+后台返回的base64数据"
代码演示
方法一：
<img :src=`数据` alt="">
方法二：
<img :src="'data:image/png;base64,'+base64数据" /> */




